<template>
  <div class="menu">
    <PageSearch
      :pageSearchConfig="pageSearchConfig"
      @reset="handleReset"
      @search="handleSearch"
    ></PageSearch>
    <PageContent
      class="pageContent"
      :pageContentConfig="refPageContentConfig"
      ref="pageContentRef"
      @createData="handleNewData"
      @edit="handleEdit"
      @changePropListShow="changePropListShow"
    ></PageContent>
    <PageModal
      ref="pageModalRef"
      :pageModalConfig="refPageModalConfig"
      :defaultInfo="defaultInfo"
      :other-info="otherInfo"
    >
      <template #menuType>
        <el-radio-group v-model="menuType">
          <el-radio
            v-for="option in menuTypeOptions"
            :label="option.value"
            :key="option.label"
            border
          >
            {{ option.label }}
          </el-radio>
        </el-radio-group>
      </template>
    </PageModal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import PageSearch from '@/components/page-search'
import PageContent from '@/components/page-content'
import PageModal from '@/components/page-modal'
import { pageSearchConfig } from './config/search'
import { pageContentConfig } from './config/content'
import { pageModalConfig } from './config/modal'
import { usePageSearch } from '@/hooks/usePageSearch'
import { usePageModal } from '@/hooks/usePageModal'
import { usePageContent } from '@/hooks/usePageContent'
import useMainStore from '@/stores/main/main'

//为什么放在这里来呢因为是搜索部分调用了content部分的方法
const [pageContentRef, handleReset, handleSearch] = usePageSearch()

// 响应式数据,方便子组件根据这个值的改变响应
const [refPageContentConfig, changePropListShow] =
  usePageContent(pageContentConfig)

const refPageModalConfig = ref({ ...pageModalConfig })
//添加上级菜单数据
const obj = refPageModalConfig.value.formItems.find(
  (item: any) => item.fileId === 'parentId'
)
obj.options = useMainStore().allMenusData

// 选择菜单类型
const menuType = ref()

// 新增数据的弹窗的显示,编辑数据的弹窗显示
const [pageModalRef, defaultInfo, handleNewData, handleEdit] = usePageModal(
  function () {
    menuType.value = 1
  },
  function (params: any) {
    menuType.value = params.type
  }
)
const menuTypeOptions = [
  {
    label: '菜单目录',
    size: 'large',
    border: true,
    value: 1
  },
  {
    label: '菜单项',
    size: 'large',
    border: true,
    value: 2
  },
  {
    label: '页面按钮',
    size: 'large',
    border: true,
    value: 3
  }
]
const otherInfo = reactive({
  type: menuType.value
})

watch(menuType, () => {
  switch (menuType.value) {
    case 1:
      refPageModalConfig.value.formItems = pageModalConfig.formItems.filter(
        (item: any) => item.fileId !== ''
      )
      break
    case 2:
      refPageModalConfig.value.formItems = pageModalConfig.formItems.filter(
        (item: any) => item.fileId !== ''
      )

      break
    case 3:
      refPageModalConfig.value.formItems = pageModalConfig.formItems.filter(
        (item: any) => item.fileId !== 'url'
      )
      break
    default:
      break
  }
})
</script>

<style lang="less" scoped>
.menu {
  .table {
    margin-top: 20px;
  }
  .pageContent {
    margin-top: 50px;
  }
}
</style>
